<template>
  <div class="plan-root" style="height:100%" v-loading="!isLogin" element-loading-text="未登陆无法使用" element-loading-spinner="iconfont icon-jujue">
    <planCard ref="refPlanCard"></planCard>
    <el-calendar class="bjs-calendar" style="width: 100%;height: 100%;" v-model="selected.date">
      <template
          slot="dateCell"
          slot-scope="{date, data}">
        <div class="date-title">
          <span>{{ data.day.split('-').slice(2).join('-') }}</span>
          <span class="el-icon-plus" @click="addPlanLine(data)"></span>
        </div>
        <div class="plan-group">

          <div :class="'plan-line ' + line.bg"
               v-for="line in planLines[data.day.split('-').slice(0).join('-')]" :key="line.id">
            <span class="plan-time">{{line.time}}</span>
            <span class="plan-content">
              <el-popover
                placement="right"
                trigger="click"
                :content="line.content"
                :visible-arrow="false"
              >
                <div>
                  <div style="margin-bottom: 10px;">
                    <el-input class="bjs-input" size="mini" v-model="current.title" maxlength="35" style="width: 200px"></el-input>
                  </div>
                  <div style="margin-bottom: 10px;">
                    <el-input class="bjs-textarea" type="textarea" resize="none" v-model="current.content" style="width: 200px"></el-input>
                  </div>
                  <div style="text-align: right">
                    <el-button size="mini" class="bjs-button">保存</el-button>
                  </div>
                </div>
                <span slot="reference" @click="showCurrent(line)">{{line.title}}</span>
              </el-popover>
            </span>
            <span class="el-icon-delete" @click="delPlanLine(line)"></span>
          </div>
        </div>
      </template>
    </el-calendar>

    <el-dialog
      width="558px"
      class="bjs-dialog"
      title="新增计划"
      top="3%"
      :visible.sync="addLineVisible"
      :append-to-body="true"
      :before-close="handleAddPlanClose">
      <addPlanLine ref="refAddPlanLine" @findPlanLine="findPlanLine()" @findPlanLines="findPlanLines()"></addPlanLine>
    </el-dialog>
  </div>
</template>


<script>
import { getPlans,delPlan } from '../../../api/plan'
import addPlanLine from './addPlanLine'
import planCard from "./planCard"

export default {
  name: "plan",
  data () {
    return {
      current: {
        date: '',
        id: '',
        title:'',
        content:''
      },
      selected: {
        date:'',
        month:this.$moment(new Date()).format('YYYY-MM'),
        day:this.$moment(new Date()).format('YYYY-MM-DD')
      },
      planCards: [],
      planLines: {},
      addCardVisible: false,
      addLineVisible: false,
    }
  },
  computed: {
    isLogin () {return this.$store.state.config.login.loginState === this.$GLOBAL.LOGIN.STATE.SUCCESS},
    fileLoading () {
      return false
    }
  },
  watch: {
    isLogin (val) {
      if (val) {
        this.findPlanLines()
        this.$refs.refPlanCard.findPlanCards()
      }
    },
    'selected.date' (val) {
      this.selected.date = val
      if (this.selected.month !== this.$moment(val).format('YYYY-MM')) {
        this.selected.month = this.$moment(val).format('YYYY-MM')
        this.findPlanLines()
      }
      if (this.selected.day !== this.$moment(val).format('YYYY-MM-DD')) {
        this.selected.day = this.$moment(val).format('YYYY-MM-DD')

      }
    }
  },
  methods: {
    showCurrent (task) {
      this.current.id = task.id
      this.current.title = task.title
      this.current.content = task.content
    },
    findPlanLine () {
      this.addLineVisible = false
      let param = {
        type:'LINE',day: this.selected.day
      }
      getPlans(param).then(resp => {
        this.planLines[this.selected.day] = resp.data[this.selected.day]
      })
    },
    findPlanLines () {
      this.addLineVisible = false
      this.planLines = {}
      getPlans({type:'LINE',month: this.selected.month}).then(resp => {
        this.planLines = resp.data
      })
    },
    addPlanLine (data) {
      this.addLineVisible = true
      this.$nextTick(() => {
        this.$refs.refAddPlanLine.resetForm()
        this.$refs.refAddPlanLine.init(data.day.split('-').slice(0).join('-'))
      })
    },
    delPlanLine (line) {
      this.$confirm('确定删除: ' + line.day + ' ' + line.time + ' 『' + line.title + '』 ？')
        .then(() => {
          delPlan({planId:line.planId}).then(() => {
            this.$bjsNotify.success('删除『' + line.title + '』成功')
            this.findPlanLine()
          })
        }).catch(() => {});
    },
    handleAddPlanClose (done) {
      this.$confirm('关闭后未保存的数据会被清空,确定关闭？')
        .then(() => {
          done()
          this.$refs.refAddPlanLine.resetForm()
        }).catch(() => {});
    }
  },
  mounted () {
    this.findPlanLines()
  },
  activated() {
    // this.findPlanLines()
  },
  components: {
    addPlanLine,planCard
  }
}
</script>

<style scoped lang="scss">
  $calendar-body: 145px;
  $calendar-body-plan-group: 120px;

  .gray   {background-color: rgba(133,133,133,0.3) !important;}
  .red    {background-color: rgba(255,0,55,0.4) !important;}
  .yellow {background-color: rgba(255,195,0,0.5) !important;}
  .blue   {background-color: rgba(0,194,242,0.5) !important;}
  .greey  {background-color: rgba(112,242,46,0.5) !important;}
  .brown  {background-color: rgba(242,175,98,0.5) !important;}

  .plan-root {
    padding-top: 10px;
    background: #ffffff;
    [data-theme="night"] & {
      background: #1f1f20;
    }
  }


  .date-title {
    @include flex(row,space-between,center);
    @include themeBgColor($theme-color-light-1,$theme-color-night-dark-1);
    height: 15px;
    padding: 5px;
    .el-icon-plus {
      opacity: 0;
      cursor: pointer;
      transition: opacity 0.5s;
      &:hover {
        @include fontBase(20px,900);
      }
    }
  }

  .plan-group {
    //@include boxBase(100%,85%);
    height: $calendar-body-plan-group;
    overflow: scroll;
    &::-webkit-scrollbar {display: none;}

    .plan-line {
      @include boxBase(100%,25px);
      @include flex(row,flex-start,center);
      font-weight: normal;

      .plan-time, .plan-content, .el-icon-delete {
        @include themeColor(#454545,#c2c2c2);
        font-size: 12px;
      }
      .plan-time {
        min-width: 33px;
        font-size: 11px;
        text-align: right;
      }
      .plan-content {
        margin:0 10px;
        width: 70%;
        overflow: hidden;
        white-space:nowrap;
        span {
          cursor: pointer;
        }
        &:hover {
          @include themeColor($theme-color-light,$theme-color-night-dark);
        }
      }
      .el-icon-delete {
        opacity: 0;
        cursor: pointer;
        &:hover {
          @include themeColor($theme-color-light,$theme-color-night-dark);
        }
      }
      &:hover {
        .el-icon-delete {
          opacity: 1 !important;
        }
      }
    }
  }


  .bjs-calendar {
    @include themeBgColor(#ffffff,#1f1f20);

    /deep/ .el-calendar__header {
      [data-theme="night"] & {
        border-color: $theme-color-night-dark-3;
      }
      /deep/ .el-calendar__title {
        @include fontBase(23px,700);
        @include themeColor($theme-color-light, #fdfdfd);
      }
      /deep/ .el-button {
        @include themeBgColor(#ffffff,#1f1f20);
        border-color: $theme-color-light;
        [data-theme="night"] & {
          border-color: $theme-color-night-dark-3;
        }
        &:hover {
          @include color();
        }
      }
    }

    /deep/ .el-calendar__body {
      @include themeBgColor(#ffffff,#1f1f20);
      padding: 0 20px 10px 20px;

      /deep/ .el-calendar-table {
        /deep/ tr,td {
          border: 0;
          [data-theme="night"] & {
            border-color: rgba(255,255,255,0);
          }
          .is-selected {
            @include themeBgColor(#ffffff,#1f1f20);
            outline: 2px solid $theme-color-light-dark;
            [data-theme="night"] & {
              outline: 2px solid $theme-color-night-dark;
            }
          }
        }

        /deep/ .el-calendar-day {
          @include fontBase(16px,700);
          height: $calendar-body;
          padding: 0;
          text-align: left;
          cursor: unset;
          &:hover {
            background: none;
            .el-icon-plus {
              opacity: 1 !important;
            }
          }
        }

        // 上一行, 下一行
        /deep/ .prev,.next {
          filter: blur(3px);
          [data-theme="night"] & {
            color: #5b5b5b;
          }
          /deep/ .plan-time,.plan-content {
            color: rgba(126, 126, 126, 0.1);
          }
        }

        // 当前行
        /deep/ .current {
          color: #b0b0ae;
        }
      }
    }
  }
</style>
